import React, { Component } from "react";
import BraftEditor from "./components/BraftEditor";
import IceContainer from "@icedesign/container";
import CustomBreadcrumb from "../../components/CustomBreadcrumb";
import { Upload, Grid, Input, Button, Icon } from "@icedesign/base";
import apiData from "./../../constants/api.js";

import "./CreateActivity.scss";

const { ImageUpload } = Upload;
const { Row, Col } = Grid;
export default class CreateActivity extends Component {
  static displayName = "CreateActivity";

  constructor(props) {
    super(props);
    this.state = {
      bannerUrl: "",
      fileList: []
    };
    this.UploadDom = this.UploadDom.bind(this);
    this.getTitle = this.getTitle.bind(this);
    this.getAuthor = this.getAuthor.bind(this);
    this.onError = this.onError.bind(this);
  }
  beforeUpload(info) {
    console.log("beforeUpload callback : ", info);
  }

  onChange(info) {
    console.log("onChane callback : ", info);
  }

  onSuccess(res, file) {
    console.log("onSuccess callback : ", res, file);
    let newRes = JSON.parse(res.data);
    if (newRes.status === 1) {
      this.setState({
        bannerUrl: newRes.data[0]
      });
    }
    console.log(newRes.data[0]);
  }

  onError(file) {
    console.log("onError callback : ", file);
    let fileList = [
      {
        name: "IMG.png",
        status: "done",
        downloadURL:
          "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg",
        fileURL:
          "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg",
        imgURL:
          "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg"
      }
    ];
    this.setState(
      {
        fileList: fileList
      },
      () => {
        console.log(this.state.fileList);
      }
    );
  }
  UploadDom() {
    return (
      <ImageUpload
        listType="picture-card"
        action="https://restaurant.hengyi.com/upload.do"
        accept="image/png, image/jpg, image/jpeg, image/gif, image/bmp"
        locale={{
          image: {
            cancel: "取消上传",
            addPhoto: "上传图片"
          }
        }}
        className="image-upload"
        defaultFileList={this.state.fileList}
        limit={1}
        beforeUpload={info => {
          this.beforeUpload(info);
        }}
        onChange={info => {
          this.onChange(info);
        }}
        onSuccess={(res, file) => {
          this.onSuccess(res, file);
        }}
        onError={file => {
          this.onError(file);
        }}
      />
    );
  }
  getTitle(value) {
    // console.log(value);
  }
  getAuthor(value) {
    // console.log(value);
  }
  render() {
    const breadcrumb = [
      { text: "活动管理", link: "" },
      { text: "发布活动", link: "#/activity/createActivity" }
    ];
    return (
      <div className="create-activity-page">
        <CustomBreadcrumb dataSource={breadcrumb} />
        <IceContainer title="活动基本信息">
          <Row className="demo-row">
            <Col span="24">
              <div className="active-img">
                <span className="active-label">1. 活动入口宣传图:</span>
                {this.UploadDom()}
              </div>
            </Col>
          </Row>
          <Row>
            <Col span="24">
              <span className="active-label">2. 标题:</span>
              <Input
                placeholder="请输入活动文章标题"
                hasClear
                maxLength={50}
                hasLimitHint
                style={{ width: 480 }}
                onChange={this.getTitle}
                size="large"
              />
            </Col>
          </Row>
          <Row className="author">
            <Col span="24">
              <span className="active-label">3. 作者:</span>
              <Input
                placeholder="请输入文章编辑的作者"
                hasClear
                maxLength={20}
                hasLimitHint
                style={{ width: 300 }}
                onChange={this.getAuthor}
                size="large"
              />
            </Col>
          </Row>
        </IceContainer>
        <BraftEditor />
        <div className="release">
          <Button type="primary" size="large" className="btn">
            发布
          </Button>
        </div>
      </div>
    );
  }
}
